<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="../js/vue.js"></script>

</head>
<body>
<div id="app">
使用vue的变量，只需在vue作用范围内，的任意位置 ，通过两组大括号的语法就能获取变量的值 ：<br/>
   <span style="color: red;font-size: larger;font-weight: bolder"> {{msg}} </span>         <br/>
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">
    <input v-model="msg"  style="width: 500px;height: 50px;font-size: 30px">

</div>


<p>
    vue的入门，按如下3个步骤进行：<br/>
    第1步：将vue.js的文件，先引入到当前页面中<br/>
    第2步：在body标签里面，创建一个div标签，并且设置一个id=app<br/>
    第3步：在页面中，创建一个script标签，并在标签中，创建一个vue的对象


</p>
</body>
<script>
    // 创建一个vue的对象
    new Vue({
        el: "#app", //表示当前这个vue的语法允许他在哪个标签内使用。绑定它的作用范围
        data: { //表示创建的所有vue的变量，都在这个Data中定义。定义变量的位置
            msg: "helloworld,欢迎来到vue的世界~~~"
        },
        methods: {//写方法的位置

        }


    })


</script>
</html>